<template>
  <div class="forget">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-md-offset-5 col-xs-6 col-xs-offset-3">
          <img src="../../assets/logo1.png" class="text-center" style="width: 50%;margin: 25% 25% 0 25%;">
          <h3 class="text-center">找回密码</h3>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <van-form @submit="onSubmit" >
            <van-field
                v-model="email"
                readonly
                name="邮箱地址"
                label="邮箱地址"
            />
            <van-field
                v-model="newpassword"
                name="密码"
                label="登录密码"
                type="password"
                placeholder="请输入您的密码"
                :rules="[{ pattern: passwordpattern,required: true, message: '请输入6-10位由大小写字母、数字组成的密码' }]"
            />
            <van-field
                v-model="againpassword"
                name="确认密码"
                label="确认密码"
                type="password"
                placeholder="再次输入密码"
                :rules="[{ validator:yzmmm,required: true, message: '两次密码输入不一样' }]"
            />
            <div style="margin: 16px;">
              <van-button block round size="large" type="info" native-type="submit">修改</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Forget} from "../../utils/api";
import qs from "qs";

export default {
  name: "Forget",
  created() {
    if(!this.$route.query.email || !this.$route.query.voucher){
      this.$router.replace('/emailcode')
    }
  },
  data(){
    return {
      email:this.$route.query.email,
      newpassword:'',
      againpassword:'',
      passwordpattern:/^[0-9a-zA-Z]{6,10}$/
    }
  },
  methods:{
    onSubmit(){
      Forget(qs.stringify({
        password:this.newpassword,
        email:this.$route.query.email,
        code:this.$route.query.voucher
      })).then(res=>{
        if(res.status==200) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          });
          this.$router.replace('/login')
        }else{
          this.$notify({
            title: '警告',
            message: res.msg,
            type: 'error'
          });
          this.logloading=false
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    yzmmm(){
      return this.newpassword === this.againpassword;
    },
  }
}
</script>

<style scoped>

</style>
